<!-- @format -->
<script setup>
	import { reactive, ref, computed } from 'vue'
	import { getArticleListApi, delArticleApi } from '@/api/article'
	import { ElMessage, ElMessageBox } from 'element-plus'
	import ArticleOps from './components/ArticleOps.vue'
	import { ARTICLE_OPS_TYPE } from '@/constant/article'
	// 查询参数
	const query = reactive({
		current: 1, // 页码
		pageSize: 10 // 每页条数
	})
	// 文章列表
	const articleList = ref([])
	// 数据总条数
	const totalCount = ref(0)

	getArticeList()

	// 获取并保存文章列表
	async function getArticeList() {
		// 发请求
		const { rows, total } = await getArticleListApi(query)
		// 保存列表数据
		articleList.value = rows
		// 保存数据总条数
		totalCount.value = total
	}
	// 页码改变时
	const onCurrentChange = (newVal) => {
		// newVal: 最新的页码
		// 让 query.current 保存最新的页面
		query.current = newVal
		// 继续新页码发请求
		getArticeList()
	}
	// 删除文章
	const onDel = async (articleId) => {
		// articleId: 当前删除的文章id

		// 注意：ElMessageBox.confirm()返回值是Promise实例，
		// 点击了确认，Promise是成功态的；点击了取消，Promise是失败态的
		try {
			// 弹出确认提示框
			await ElMessageBox.confirm('此操作不可逆，确认删除么?', '温馨提示', {
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning'
			})
			// 调用删除接口
			await delArticleApi(articleId)
			// 成功的提示
			ElMessage.success('删除成功')
			// 重新获取文章列表
			getArticeList()
		} catch (e) {}
	}

	// 控制抽屉组件的显示或隐藏
	const visible = ref(false)

	// 标题的映射对象
	const TITLE_MAP = {
		add: '新增',
		preview: '预览',
		edit: '编辑'
	}

	// 记录当前的操作类型
	const currentOpsType = ref('')
	// 记录当前操作的文章 id
	const articleId = ref('')

	// 计算抽屉组件的动态标题
	const activeTitle = computed(() => {
		return TITLE_MAP[currentOpsType.value] + '文章'
	})

	// 打开抽屉
	const onOpen = (opsType, id) => {
		visible.value = true
		// 保存当前操作类型
		currentOpsType.value = opsType
		// 保存当前的文章id
		articleId.value = id
	}

	// 关闭抽屉
	const onClose = () => {
		visible.value = false
	}

	const onFinish = () => {
		// 关闭抽屉
		onClose()
		// 重新获取文章列表
		getArticeList()
	}
</script>

<template>
	<div class="article-box">
		<!-- 面包屑导航组件 -->
		<el-breadcrumb separator-icon="ArrowRight">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>文章管理</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片组件 -->
		<el-card>
			<!-- 头部 -->
			<template #header>
				<div class="card-header">
					<span>共 {{ totalCount }} 条记录</span>
					<el-button
						type="primary"
						round
						@click="onOpen(ARTICLE_OPS_TYPE.add, '')">
						<el-icon><Plus /></el-icon>
						<span>新增文章</span>
					</el-button>
				</div>
			</template>
			<!-- 主体：表格区域 -->
			<el-table
				:data="articleList"
				border
				striped>
				<el-table-column
					prop="stem"
					label="标题"
					width="300" />
				<el-table-column
					prop="creator"
					label="作者"
					width="180" />
				<el-table-column
					prop="category"
					label="类别"
					width="140" />
				<el-table-column
					prop="likeCount"
					sortable
					label="点赞"
					width="140" />
				<el-table-column
					prop="views"
					sortable
					label="浏览数"
					width="140" />
				<el-table-column
					prop="createdAt"
					label="创建时间"
					width="240" />
				<el-table-column label="操作">
					<template #default="{ row }">
						<el-tooltip
							effct="dark"
							content="预览"
							placement="bottom">
							<el-icon
								size="18"
								@click="onOpen(ARTICLE_OPS_TYPE.preview, row.id)"
								><View
							/></el-icon>
						</el-tooltip>
						<el-tooltip
							effct="dark"
							content="编辑"
							placement="bottom">
							<el-icon
								size="18"
								@click="onOpen(ARTICLE_OPS_TYPE.edit, row.id)"
								><Edit
							/></el-icon>
						</el-tooltip>
						<el-tooltip
							effct="dark"
							content="删除"
							placement="bottom">
							<el-icon
								size="18"
								@click="onDel(row.id)"
								><Delete
							/></el-icon>
						</el-tooltip>
					</template>
				</el-table-column>
			</el-table>
			<!-- 底部：分页组件 -->
			<template #footer>
				<!-- 
          current-change: 页码改变时触发
          v-model:current-change: 绑定页码值，让相应的页码高亮
          total: 数据的总条数
          backgruond: 页码添加背景色
          layout: 控制分页组件的布局结构
        -->
				<el-pagination
					@current-change="onCurrentChange"
					v-model:current-page="query.current"
					:total="totalCount"
					background
					layout="prev, pager, next" />
			</template>
		</el-card>

		<!-- 
      抽屉组件
        v-model="布尔值"： 控制抽屉组件的打开或关闭
        title: 抽屉组件的标题
        direction: 抽屉组件的弹出方向
        size: 控制窗体的大小，百分数是相对于可视区的宽度
    -->
		<el-drawer
			v-model="visible"
			:title="activeTitle"
			direction="rtl"
			size="45%">
			<!-- 文章操作组件 -->
			<ArticleOps
				:key="articleId"
				:opsType="currentOpsType"
				:articleId="articleId"
				@finish="onFinish"
				@close="onClose" />
		</el-drawer>
	</div>
</template>

<style scoped lang="scss">
	.article-box {
		.el-card {
			margin-top: 20px;
			.card-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 40px;
			}
			:deep(.el-card__footer) {
				margin-top: -15px;
				border-top: none;
			}
			.el-table {
				.el-icon:nth-child(2) {
					margin: 0 15px;
				}
			}
			.el-pagination {
				display: flex;
				justify-content: center;
			}
		}
	}
</style>
